<template>
    <div class="container">
        <div>
            <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
                <span style="margin-right: 20px; font-weight: bold;">闭环管理</span>
                <span style="margin-right: 20px;">|</span>
                <span style="display: flex; align-items: center;">
                    <span>图文审核</span>
                </span>
            </div>

        </div>

        <div class="selection">
            <el-date-picker v-model="startTime" type="date" placeholder="选择日期时间" style="width:200px"
                value-format="yyyy-MM-dd" class="custom-select">
            </el-date-picker>
            <span style="font-size: 16px;color: white;margin: 0 10px">至</span>
            <el-date-picker v-model="endTime" type="date" placeholder="选择日期时间" style="width:200px"
                value-format="yyyy-MM-dd" class="custom-select">
            </el-date-picker>
            <label for="countyName" style="color: #fff;margin: 0 5px">县:</label>
            <el-select id="countyName" v-model="countyName" @change="getTown(countyName)" placeholder="县"
                style="width: 150px;margin: 0 5px" class="custom-select">
                <el-option v-for="item in countyOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <label for="townName" style="color: #fff;margin: 0 5px" v-if="countyName !== '全部'">镇:</label>
            <el-select id="townName" v-model="townName" placeholder="镇" style="width: 100px;margin: 0 5px"
                v-if="countyName !== '全部'" class="custom-select" v-loading="TownLoading">
                <el-option v-for="item in townNameOptions" :key="item" :label="item" :value="item">
                </el-option>
            </el-select>
            <label for="type" style="color: #fff;margin: 0 5px">灾害类型:</label>
            <el-select id="type" v-model="type" placeholder="灾害类型" style="width: 150px;margin: 0 5px"
                class="custom-select">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>


            <el-button type="primary" @click="filterData" style="margin-left: 10px">确定</el-button>


        </div>

        <!-- 审核弹窗 -->
        <el-dialog title="具体信息" :visible.sync="reviewVisible" width="50%" class="reviewDialog">
            <div class="box">
                <div class="img">
                    <span>现场图片</span>
                    <!-- 图片 -->
                    <div>
                        <el-image style="width: 100px; height: 100px" :src="img" :preview-src-list="reviewPupop.urls"
                            v-for="img in reviewPupop.urls" :key="img">
                        </el-image>
                    </div>

                </div>
                <div class="info">
                    <div>
                        <span>上传时间:</span>
                        <span>{{ reviewPupop.uploadTime }}</span>
                    </div>
                    <div>
                        <span>灾害类型:</span>
                        <span>{{ reviewPupop.type }}</span>
                    </div>
                    <div>
                        <span>上传人姓名:</span>
                        <span>{{ reviewPupop.name }}</span>
                    </div>
                    <div>
                        <span>上传人所属县:</span>
                        <span>{{ reviewPupop.county }}</span>
                    </div>
                    <div>
                        <span>上传人所属乡镇:</span>
                        <span>{{ reviewPupop.town }}</span>
                    </div>
                    <div>
                        <span>具体地点:</span>
                        <span>{{ reviewPupop.venue }}</span>
                    </div>
                    <div>
                        <span>具体事件:</span>
                        <span>{{ reviewPupop.descs }}</span>
                    </div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="reviewImageAndText('2')">不通过</el-button>
                <el-button type="primary" @click="reviewImageAndText('1')">通过</el-button>
            </span>
        </el-dialog>

        <!-- 查看弹窗 -->
        <el-dialog title="具体信息" :visible.sync="showVisible" width="50%" class="reviewDialog">
            <div class="box">
                <div class="img">
                    <span>现场图片</span>
                    <!-- 图片 -->
                    <div>
                        <el-image style="width: 100px; height: 100px" :src="img" :preview-src-list="reviewPupop.urls"
                            v-for="img in reviewPupop.urls" :key="img">
                        </el-image>
                    </div>

                </div>
                <div class="info">
                    <div>
                        <span>上传时间:</span>
                        <span>{{ reviewPupop.uploadTime }}</span>
                    </div>
                    <div>
                        <span>灾害类型:</span>
                        <span>{{ reviewPupop.type }}</span>
                    </div>
                    <div>
                        <span>上传人姓名:</span>
                        <span>{{ reviewPupop.name }}</span>
                    </div>
                    <div>
                        <span>上传人所属县:</span>
                        <span>{{ reviewPupop.county }}</span>
                    </div>
                    <div>
                        <span>上传人所属乡镇:</span>
                        <span>{{ reviewPupop.town }}</span>
                    </div>
                    <div>
                        <span>具体地点:</span>
                        <span>{{ reviewPupop.venue }}</span>
                    </div>
                    <div>
                        <span>具体事件:</span>
                        <span>{{ reviewPupop.descs }}</span>
                    </div>
                </div>

            </div>

        </el-dialog>


        <!-- 待审核 -->
        <div class="reviewStatusWill">
            <div class="table_title">
                <span style="font-size: 16px;color:white">待审核</span>
            </div>
            <el-table stripe ref="filterTable" v-loading="loading" :data="reviewWillTableData" style="width: 100%"
                :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                @cell-mouse-enter="getProduct" max-height="750px">
                <el-table-column prop="uploadTime" label="上传时间" align="center" width="200px">
                </el-table-column>
                <el-table-column prop="type" label="灾害类型" align="center">
                </el-table-column>
                <el-table-column prop="name" label="上传人姓名" align="center">
                </el-table-column>
                <el-table-column prop="county" label="上传人所属县" align="center">
                </el-table-column>
                <el-table-column prop="town" label="上传人所属乡镇" align="center">
                </el-table-column>
                <el-table-column prop="venue" label="具体地点" align="center">
                </el-table-column>
                <el-table-column prop="url" label="现场图片" align="center">
                    <!-- 图片的显示 -->
                    <template slot-scope="scope">
                        <img :src="scope.row.urls[0]" min-width="70" height="70" />
                        <span>. . .</span>
                    </template>
                </el-table-column>
                <el-table-column prop="descs" label="上传事件" align="center" width="250px">
                </el-table-column>
                <el-table-column prop="status" label="审核" align="center">
                    <el-button type="danger" @click="reviewVisible = true">审核</el-button>
                </el-table-column>
            </el-table>
        </div>

        <!-- 通过 -->
        <div class="reviewStatusDone">
            <div class="table_title">
                <span style="font-size: 16px;color:white">已通过</span>
            </div>
            <el-table stripe ref="filterTable" v-loading="loading" :data="reviewPassTableData" style="width: 100%"
                :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                @cell-mouse-enter="getProduct" max-height="750px">
                <el-table-column prop="uploadTime" label="上传时间" align="center" width="200px">
                </el-table-column>
                <el-table-column prop="type" label="灾害类型" align="center">
                </el-table-column>
                <el-table-column prop="name" label="上传人姓名" align="center">
                </el-table-column>
                <el-table-column prop="county" label="上传人所属县" align="center">
                </el-table-column>
                <el-table-column prop="town" label="上传人所属乡镇" align="center">
                </el-table-column>
                <el-table-column prop="venue" label="具体地点" align="center">
                </el-table-column>
                <el-table-column prop="url" label="现场图片" align="center">
                    <!-- 图片的显示 -->
                    <template slot-scope="scope">
                        <img :src="scope.row.urls[0]" min-width="70" height="70" />
                        <span>. . .</span>
                    </template>
                </el-table-column>
                <el-table-column prop="descs" label="上传事件" align="center" width="250px">
                </el-table-column>
                <el-table-column prop="status" label="查看" align="center">
                    <el-button type="primary" @click="showVisible = true">查看</el-button>
                </el-table-column>
            </el-table>
        </div>
        <!-- 不通过 -->
        <div class="reviewStatusRefuse">
            <div class="table_title">
                <span style="font-size: 16px;color:white">不通过</span>
            </div>
            <el-table stripe ref="filterTable" v-loading="loading" :data="reviewRefuseTableData" style="width: 100%"
                :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                @cell-mouse-enter="getProduct" max-height="750px">
                <el-table-column prop="uploadTime" label="上传时间" align="center" width="200px">
                </el-table-column>
                <el-table-column prop="type" label="灾害类型" align="center">
                </el-table-column>
                <el-table-column prop="name" label="上传人姓名" align="center">
                </el-table-column>
                <el-table-column prop="county" label="上传人所属县" align="center">
                </el-table-column>
                <el-table-column prop="town" label="上传人所属乡镇" align="center">
                </el-table-column>
                <el-table-column prop="venue" label="具体地点" align="center">
                </el-table-column>
                <el-table-column prop="url" label="现场图片" align="center">
                    <!-- 图片的显示 -->
                    <template slot-scope="scope">
                        <img :src="scope.row.urls[0]" min-width="70" height="70" />
                        <span>. . .</span>
                    </template>
                </el-table-column>
                <el-table-column prop="descs" label="上传事件" align="center" width="250px">
                </el-table-column>
                <el-table-column prop="status" label="查看" align="center">
                    <el-button type="primary" @click="showVisible = true">查看</el-button>
                </el-table-column>
            </el-table>
        </div>
    </div>

</template>

<script>
import { reqAllImageAndTextReview, postReviewGraphicsAndText, reqTown } from '@/api/closed_loop';
import Cookies from 'js-cookie';
// 处理时间格式
import moment from 'moment';
export default {
    name: "imageAndTextReview",
    data() {
        return {
            loading: false,
            //开始时间
            startTime: moment(new Date()).subtract(1, 'years').format('YYYY-MM-DD hh:mm:ss'),
            // 结束时间
            endTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss'),
            // 查看弹窗
            showVisible: false,
            // 审核弹窗
            reviewVisible: false,
            // 通过
            reviewPassTableData: [],
            // 不通过
            reviewRefuseTableData: [],
            // 待审核
            reviewWillTableData: [],
            reviewPupop: {},
            TownLoading: false,
            // 县
            countyName: Cookies.get('county') === '雅安' ? '全部' : Cookies.get('county'),
            // 地区选项
            countyOptions: Cookies.get('county') === '雅安' ? [
                {
                    label: '全部',
                    value: '全部'
                },
                {
                    label: '雨城',
                    value: '雨城'
                },
                {
                    label: '经开',
                    value: '经开'
                },
                {
                    label: '名山',
                    value: '名山'
                },
                {
                    label: '天全',
                    value: '天全'
                },
                {
                    label: '芦山',
                    value: '芦山'
                },
                {
                    label: '宝兴',
                    value: '宝兴'
                },
                {
                    label: '荥经',
                    value: '荥经'
                },
                {
                    label: '汉源',
                    value: '汉源'
                }, {
                    label: '石棉',
                    value: '石棉'
                },] : [{ label: Cookies.get('county'), value: Cookies.get('county') }],
            // 镇
            townName: '',
            townNameOptions: [

            ],
            // 类型
            type: '',
            // 类型选项
            typeOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '地质灾害',
                    label: '地质灾害'
                },
                {
                    value: '山洪灾害',
                    label: '山洪灾害'

                },
                {
                    value: '地灾降水短临',
                    label: '地灾降水短临'
                },
                {
                    value: '山洪降水短临',
                    label: '山洪降水短临'
                },
                {
                    value: '地灾暴雨预警',
                    label: '地灾暴雨预警'
                },
                {
                    value: '山洪暴雨预警',
                    label: '山洪暴雨预警'
                },
            ],


        }
    },
    mounted() {
        this.getImageAndTextReview()
    },
    methods: {
        // 表格样式
        headerCellStyle() {
            return {
                background: '#0c2340',
                color: '#fff',
            };
        },
        cellStyle() {
            return {
                background: '#05152e',
                color: '#fff',
            };
        },
        rowStyle() {
            return {
                height: '30px',
            };
        },
        // 获取审核列表
        async getImageAndTextReview() {
            this.loading = true
            let res = await reqAllImageAndTextReview(this.countyName, this.townName, this.type, this.startTime, this.endTime)
            console.log(res.data)
            this.reviewPassTableData = res.data.data.pass
            this.reviewWillTableData = res.data.data.unreviewed
            this.reviewRefuseTableData = res.data.data.notPass
            this.loading = false

        },
        // 审核图文
        async reviewImageAndText(status) {
            let res = await postReviewGraphicsAndText(this.reviewPupop.id, status)
            if (res.data.code === 200) {
                this.$message.success('审核成功！')
                this.reviewVisible = false
                // 审核后再次获取审核列表
                this.getImageAndTextReview()
            }
            else {
                this.$message.error('审核失败！')
                // 审核后再次获取审核列表
                this.getImageAndTextReview()

            }
        },
        // 具体某行审核信息
        getProduct(product) {
            this.reviewPupop = product
        },
        // 获取镇
        async getTown(countyName) {
            this.TownLoading = true
            this.townName = ''
            const result = await reqTown(countyName)
            this.townNameOptions = result.data.data
            console.log(this.townNameOptions)
            this.TownLoading = false
        },
        // 筛选数据
        filterData() {
            this.getImageAndTextReview()
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    ::v-deep .el-table__body-wrapper {

        // 整个滚动条
        &::-webkit-scrollbar {
            width: 10px; // 纵向滚动条的宽度
            background: rgba(213, 215, 220, 0.3);

        }

        // 滚动条轨道
        &::-webkit-scrollbar-track {
            border: 5px solid white;
        }


    }

    // 滚动条的滑块
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #0c2340;
        border-radius: 2px;
    }

    // --------------------隐藏table gutter列和内容区右侧的空白 start
    ::v-deep .el-table th.gutter {
        display: none;
        width: 0
    }

    ::v-deep .el-table colgroup col[name='gutter'] {
        display: none;
        width: 0;
    }

    // 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
    ::v-deep .el-table__body {
        width: 100% !important;
    }

    // --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

    .custom-select .el-input__inner,
    .el-date-picker .el-input__inner {
        background-color: rgb(36, 54, 101) !important;
        color: white !important;
        font-weight: bold !important;
        border: 2px solid #fff !important;
    }

    .selection {
        width: 100%;
        margin-bottom: 20px;
    }

    .table_title {
        width: 100%;
        display: grid;
        place-items: center;
        margin: 50px 0;

    }

    .reviewDialog {
        .box {
            display: flex;

            .img {
                span {
                    width: 100%;
                    height: 10%;
                    display: block;
                    font-size: 18px;
                }

                width: 50%;

                div {
                    width: 100%;
                    height: 90%;
                }
            }

            .info {
                width: 50%;

                div {
                    width: 100%;
                    margin: 40px 0;

                    span:first-child {
                        margin-right: 20px;
                        font-size: 18px;
                        color: black;
                    }

                    span:last-child {
                        font-size: 17px;
                        color: gray;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>